<template>
  <div class="meituan-refund-search">
    <c-title text="搜索"></c-title>
    <div class="search-box">
      <div class="search-options" v-if="show_tips">
        <div @click="choose(-1)">全部</div>
        <div @click="choose(1)">到家</div>
        <div @click="choose(2)">到店</div>
        <div @click="choose(3)">买药</div>
      </div>
      <div class="search">
        <div style="display: flex;align-items: center;margin-right: .625rem;" @click='show_tips = !show_tips'>
          <div>{{ value_category == -1 ? '全部' : value_category == 1 ? '到家' : value_category == 2 ? '到店' : '买药' }}</div>
          <van-icon name="arrow-down" />
        </div>
        <div class="search-input">
          <i class="iconfont icon-sousuo1"></i>
          <input v-model="keyword" type="text" :placeholder="value_category == -1 ? '请输入关键词搜索' : '请输入商品id搜索'" />
          <button class="search-button" @click="search">搜索</button>
        </div>
      </div>
    </div>
    <div v-if="list && list.length !== 0">
      <Waterfall :list="list" :breakpoints="breakpoints" backgroundColor="#f5f5f5" :loadProps='loadProps' :delay="800">
        <template #item="{ item }">
          <div class="li" :key="item.id" @click="detail_handle(item)">
            <div class="top">
              <div class="availavle-poi-num" v-if="item.availablePoiInfo.availablePoiNum">{{
                item.availablePoiInfo.availablePoiNum }}家</div>
              <LazyImg v-if="item.couponPackDetail.headUrl" :url="item.couponPackDetail.headUrl"></LazyImg>
            </div>
            <div class="bottom">
              <div class="title">{{ item.couponPackDetail.name }}</div>
              <div class="band-name" v-if="item.brandInfo.brandName"><i class="iconfont icon-shanghu"></i>{{
                item.brandInfo.brandName }}</div>
              <div class="price">
                <div class="current-price">
                  <span class="fz-26" style="margin-right: .1563rem;">¥</span>
                  <span class="fz-34">{{ item.couponPackDetail.sellPrice }}</span>
                </div>
                <div class="original-price">¥{{ item.couponPackDetail.originalPrice }}</div>
              </div>
              <div class="sale-volume" v-if='item.couponPackDetail.saleVolume'><span>{{ item.couponPackDetail.saleVolume
                  }}</span></div>
            </div>

          </div>
        </template>
      </Waterfall>
    </div>
    <van-empty v-if="list && list.length == 0" description="暂无数据" />
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
import "vue-waterfall-plugin/dist/style.css";
import { Waterfall, LazyImg } from "vue-waterfall-plugin";
import loading from 'assets/images/img_default.png';
export default {
  mixins: [scrollMixin],
  components: { Waterfall, LazyImg },
  data() {
    return {
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 4
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 3
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      },
      is_first: true,
      loadProps: {
        loading: loading,
        error: loading
      },
      search_type: "keyword",
      hasNext: true,
      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      keywords: "",
      params_data: {},
      point: {
        lat: "",
        lng: ""
      },
      city_name: "请选择",
      second_cate_id: "",
      cate_id: "",
      city_id: "",
      value_category: -1,
      show_tips: false,
      category_list: [],
      searchId: "",

    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name == 'meituan_refund') {
        vm.init()
      }
    })
  },
  mounted() {
    this.fun.setWXTitle('搜索');
    this.init();
  },
  methods: {
    init() {
      this.show_tips = false;
      this.search_type = 'keyword';
      this.is_first = true;
      this.searchId = "";
      this.list = [];

      if (this.category_list.length == 0) {
        this.getCategory();
      }
      if (this.$route.params.category || this.$route.params.category == -1) {
        this.value_category = this.$route.params.category;
      }
      if (this.$route.params.ids) {
        this.ids = this.$route.params.ids;
      }
      this.keyword = '';
      this.current_page = 1;
      this.isLoadMore = true;
      // this.cate_id = this.$route.params.id;
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      if (this.$route.params.ids) {
        this.ids = this.$route.params.ids;
      }
      if (myLoaction) {
        this.point = myLoaction.point;
        this.getData();
      } else {
        this.fun
          .getLocation()
          .then((res) => {
            this.point = res.point;
            this.getData();
          })
          .catch(err => {
            console.log(err);
            this.getData();
          });
      }


      // this.city_name = '请选择';
      // let query = this.$route.query;
      // let city_id = localStorage.getItem('meituan_city_id');
      // let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      // let meituanCategory = JSON.parse(localStorage.getItem('meituanCategory'));
      // this.city_id = city_id;
      // if (query.k) {
      //   this.keywords = query.k;
      // }
      // this.cate_id = meituanCategory.cate_id;
      // this.second_cate_id = meituanCategory.sId;
      // if (query.city) {
      //   this.city_name = query.city;
      // }
      // if (query.lng&&query.lat) {
      //   this.point.lng = query.lng;
      //   this.point.lat = query.lat;
      // }else if(myLoaction){
      //   this.point = myLoaction.point;
      // }
    },
    toCityPage() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "meituan", path: 'search' }))
    },
    detail_handle(item) {

      let json = { id: item.couponPackDetail.skuViewId, ids: this.search_type == 'keyword' ? item.ids : this.ids }
      if (this.ids == 153 && this.value_category == 3) {
        json.ids = 153;
      }
      this.$router.push(this.fun.getUrl('meituan_refund_detail', json, {}));
    },

    choose(number) {
      this.value_category = number;
      this.show_tips = false;
      if (this.value_category == -1) {
        this.search_type = 'keyword';
      } else {
        this.search_type = 'id';
      }
    },
    search() {
      let ids = '';
      if (this.value_category == 1) {
        ids = this.category_list[0].ids.join('');
      } else if (this.value_category == 2) {
        ids = '203';
      } else if (this.value_category == -1) {
        ids = -1
      } else {
        ids = this.category_list[this.category_list.length - 1].ids.join('');
      }
      if (this.value_category == -1) {
        this.search_type = 'keyword';
      } else {
        this.search_type = 'id';
      }
      this.searchId = '';
      this.is_first = true;
      this.ids = ids;
      this.list = [];
      this.getData();
    },
    async getData(page = 1) {
      let json = {
        page
      }
      if (this.keyword) {
        json.keyword = this.keyword

      }
      if (this.point) {
        json.latitude = this.point.lat * 1;
        json.longitude = this.point.lng * 1;
      }
      if (this.ids) {
        json.ids = this.ids
      }
      json.search_type = this.search_type;
      if (this.searchId) {
        json.searchId = this.searchId;
      }
      if (this.ids == -1) {
        delete json.ids;
      }

      let { result, data } = await $http.post("plugin.meituan-group-buy.frontend.good.good", json, '');

      this.isLoadMore = true;
      if (result) {
        this.current_page += 1;
        this.hasNext = data.hasNext;
        this.searchId = data.searchId || '';
        if (page == 1) {
          this.list = data.data || [];
        } else if (page > 1) {
          this.list = this.list.concat(data.data);
        }
      }
    },
    getMoreData() {
      if (!this.hasNext) {
        return;
      }
      this.isLoadMore = false;
      this.getData(this.current_page);
    },
    async getCategory() {
      let { data, msg, result } = await $http.get("plugin.meituan-group-buy.frontend.good.category", '', '');
      if (result == 0) {
        this.getData();
        return this.$toast(msg)
      }
      // this.ids = [];
      // if(this.$route.params.category){
      // this.ids=data[0].ids||[];
      // }
      this.category_list = data;
      // this.getData();
      console.log(this.category_list, '-----s===s');
    },
    getChildrenCategory(first_cate_id) {
      $http.get("plugin.meituan-group-buy.frontend.good.category", { first_cate_id, city_id: this.city_id }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.second_cate_id = res.data[0].id;
        this.getData();
      })
    },

  }
};
</script>

<style scoped lang="scss">
// ::v-deep .van-nav-bar {
//   background-color: var(--themeBaseColor) !important;
// }

// ::v-deep .van-nav-bar {
//   border-bottom: none;
// }

// ::v-deep .van-button--default {
//   background-color: var(--themeBaseColor) !important;
//   color: #fff;
// }

// ::v-deep .van-nav-bar .van-icon,
// ::v-deep .van-nav-bar__title {
//   color: #fff;
// }

.search-options {
  position: absolute;
  left: .75rem;
  bottom: -0.3125rem;
  background-color: #fff;
  border-radius: .5rem;
  transform: translateY(100%);
  z-index: 100;
  width: 6.25rem;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: -1.125rem;
    left: .625rem;
    border: .625rem solid #fff;
    border-color: transparent transparent #fff transparent;
    z-index: 2;
  }

  div {
    line-height: 1.875rem;
    border-bottom: 1px solid #ccc;
    margin: 0 .75rem;
  }

  div:last-child {
    border-bottom: unset;
  }

}


.sale-volume {
  display: flex;
  align-items: center;

  span {
    display: inline-block;
    color: #F96D20;
    margin-top: .3125rem;
    padding: .1563rem .1875rem;
    background-color: #FEE7DB;
    font-size: .625rem;
    border-radius: 0.1875rem;
  }

  // opacity: 0.16;
}

.band-name {
  font-weight: 400;
  font-size: 0.6875rem;
  color: #6E6E79;
  display: flex;
  align-items: center;

  .icon-shanghu {
    font-size: 0.625rem;
    margin-right: 0.3125rem;
  }

  margin-bottom: .3125rem;
}

.li {
  border-radius: 0.5rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: .6563rem;
  margin-bottom: 0.375rem;
  overflow: hidden;

  img {
    width: 100% !important;
  }

  .receive {
    font-weight: 400;
    font-size: 0.75rem;
    color: #F15353;
  }

  .tips {
    width: 0.9375rem;
    height: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(91deg, rgba(255, 38, 60, 0.1) 0%, rgba(255, 116, 9, 0.1) 100%);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 38, 60, 0.3);
    font-weight: 500;
    font-size: 0.6875rem;
    color: #F15353;
    margin-right: 0.1563rem;
  }

  .fz-26 {
    font-size: .8125rem;
  }

  .fz-34 {
    font-size: 1.0625rem;
  }

  .current-price {
    display: flex;
    color: #F15353;
    font-weight: bold;
    align-items: baseline;
  }

  .original-price {
    font-weight: 400;
    font-size: 0.6875rem;
    color: #6E6E79;
    text-decoration-line: line-through;
    margin-left: .1875rem;
    margin-right: .3125rem;
  }

  .discount {
    flex-shrink: 0;
    font-weight: 400;
    font-size: 0.6875rem;
    color: #F15353;
  }

  .top {
    position: relative;
    // display: flex;
    margin: 0;
    padding: 0;

    img {
      max-height: 14.375rem;
      width: 100%;
      overflow: hidden;
      margin: 0;
      display: block;
    }

    .mic-content {
      margin: 0.375rem;
      padding: 0.75rem;
      background-color: #f6f6f6;
      font-size: 0.8125rem;
      color: #3b3b4a;
      line-height: 18px;
      min-height: 48px;
      border-radius: 0.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }
  }

  .bottom {
    padding: 0 .625rem;

    .price {
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .title {
      font-weight: 600;
      margin: .6563rem 0 .5625rem;
      font-size: 0.875rem;
      line-height: 1rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #00001c;
      text-align: left;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: left;
    }

    .goods-desc {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: .2813rem;
      line-height: 1;

      span {
        margin-right: .3125rem;
        font-weight: 400;
        font-size: 0.6875rem;
        color: #6E6E79;
      }
    }


  }
}

.availavle-poi-num {
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 2.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  // background: #000000;
  overflow: hidden;
  border-radius: 0px 0.3125rem 0px 0px;
  z-index: 1;
  color: #FFFFFF;
  font-size: 0.75rem;

  &::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
  }
}

.van-icon-arrow-down {
  display: flex;
  align-items: center;
  margin-left: 0.1563rem;
}

.box {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.5rem 0.75rem;
  padding: 0.75rem;
  display: flex;

  .space-around {
    position: relative;
    justify-content: space-around !important;
  }

  .space-around::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.0938rem;
    border-radius: 0.125rem;
    background: #F15353;
  }

  .illustrate {
    position: relative;
    height: 2.75rem;
    background: #FFF5F5;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.6875rem;
    color: #F15353;
  }

  .illustrate::after {
    position: absolute;
    content: "";
    bottom: -0.3rem;
    left: 0.6563rem;
    background: #FFF5F5;
    width: 1.375rem;
    height: 1.375rem;
    transform: rotate(45deg);
  }

  .preferential-2 {
    margin-top: 0.3438rem;
    display: flex;
    color: #AAAAB3;
    font-size: 11px;
    align-items: baseline;

  }

  .preferential {
    margin-top: 0.9375rem;
    display: flex;
    color: #F15353;
    font-size: 0.75rem;
    align-items: baseline;
  }

  .discount {
    height: 1.0313rem;
    line-height: 1.0313rem;
    padding: 0 0.2188rem;
    box-sizing: border-box;
    border-radius: 0.1875rem;
    border: 1px solid #F15353;
    font-size: 0.625rem;
    margin-left: 0.25rem;
  }

  .box-right {
    margin-left: 0.375rem;
    flex: 1;

    .title {
      text-align: left;
      margin-top: 0.375rem;
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
    }

    .tips {
      font-size: 0.75rem;
      font-weight: 400;
      color: #6E6E79;
      margin: 0.75rem 0;
      text-align: left;
    }
  }

  .distance {
    width: max-content;
    margin-top: 0.5625rem;
    margin-bottom: .625rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1;
    color: #6E6E79;
    text-align: center;
  }

  .box-left {
    flex-shrink: 0;
  }

  .box-left-img {
    width: 6.25rem;
    height: auto;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
  }

  .make-money {
    margin-top: .625rem;
    max-width: 4.9375rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: .375rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .profit {
      position: relative;
      font-size: 0.75rem;
      padding: 0 0.375rem;
      border-right: 1px dotted #F96D20;
    }

    .price {
      flex: 1;
      text-align: center;
      font-size: 0.8125rem;
      font-weight: bold;
      color: #F96D20;
    }
  }
}

.meituan-refund-search {

  .search-box {
    position: relative;
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
  }

  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 2.25rem;
    background: #FFFFFF;
    border-radius: 1.25rem;
    padding: 0.1875rem 0.25rem 0.1875rem 1.0938rem;

    .icon-sousuo1 {
      font-size: 0.875rem;
      margin-right: 0.2188rem;
      color: #999999;
    }

    input {
      flex: 1;
      border: none;
      border-radius: 100px;
      padding-left: 0.1563rem;
      padding-right: 1rem;
    }
  }

  .search-button {
    width: 3.25rem;
    height: 1.875rem;
    background: var(--themeBaseColor);
    border-radius: 1.25rem;
    border: none;
    color: #fff;
  }

  .search-address {
    display: flex;
    align-self: center;
    color: #fff;
    font-size: 0.9375rem;
    margin-left: 0.6875rem;
  }
}

.original-price {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 400;
  font-size: 0.6875rem;
  color: #AAAAB3;
  margin-top: 0.3438rem;

}

.sell-price {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: bold;
  color: #F15353;
  font-size: 1.125rem;
}
</style>
